<template>
  <div id="wechat_management">
    <el-button-group>
      <el-button
        type="success"
        size="medium"
        icon="el-icon-circle-plus-outline"
        @click="bindWechat"
        >绑定微信</el-button
      >
      <el-input
        v-model="admin_name"
        placeholder="请输入管理员名称"
        size="medium"
        clearable
        style="width: 200px"
      ></el-input>
    </el-button-group>
    <el-table
      :data="admin_list"
      stripe
      max-height="500px;"
      style="margin-top: 10px"
    >
      <el-table-column prop="name" label="管理员名称" align="center">
      </el-table-column>
      <el-table-column align="right" width="150">
        <template slot="header" slot-scope="scope"> 操作</template>
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="medium"
            @click="delWechat(scope.row.unionid)"
            >解除绑定</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="绑定微信"
      :visible.sync="dialog_status"
      width="400px"
      center
      :modal="false"
      :show-close="false"
      @opened="qr_init"
    >
      <div id="wx_login_qr" style="text-align: center; height: 320px"></div>
    </el-dialog>
  </div>
</template>

<script>
import utils from "@/store/utils";

export default {
  props: ["userid"],
  data() {
    return {
      admin_name: "",
      admin_list: [],
      dialog_status: false,
    };
  },
  methods: {
    // 绑定微信
    bindWechat() {
      if (this.admin_name == "" || this.admin_name == null) {
        this.$message.error("请先输入管理员名称");
      } else {
        this.dialog_status = true;
      }
    },
    // 获取列表
    getList() {
      this.$axios({
        method: "post",
        url: "/api/adminapi/dispatcher",
        data: {
          action: "list",
          userid: this.userid,
        },
      }).then((res) => {
        if (res.data.ret == 0) {
          this.admin_list = res.data.data;
        }
      });
    },
    // 解除绑定微信
    delWechat(unionid) {
      this.$confirm("确认是否解绑该微信", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "/api/adminapi/dispatcher",
            data: {
              action: "del",
              unionid: unionid,
            },
          }).then((res) => {
            if (res.data.ret == 0) {
              this.$message.success("解绑成功");
              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    qr_init() {
      let obj = new WxLogin({
        id: "wx_login_qr",
        appid: "wx7870d5e16708e05e",
        scope: "snsapi_login",
        redirect_uri: utils.urlencode(
          "https://www.liandunkaoqin.com/WechatLogin"
        ),
        state: `add_wechat,${this.userid},${this.admin_name},${this.$store.state.unionid}`,
        href: "data:text/css;base64,QGNoYXJzZXQiVVRGLTgiOw0KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDI4MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSA=",
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped>
</style>

<style>
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgb(200, 200, 200);
}

#wechat_management .el-table td,
#wechat_management .el-table td span,
#wechat_management .el-table th {
  text-align: center;
  font-size: 15px;
}

#wechat_management .el-table th {
  background-color: #ecf5ff;
}

</style>